<template>
  <div class="animated fadeIn">
    <!-- 车队列表 2018/3/7 10:50 zhangQ -->
    <Row>
      <i-col :md="24">
        <div>
          <div id="container" style="margin-bottom:10px;">
            <Button type="primary" size="large" id='pickfiles' @click="bindReceiver"
                    style="padding-bottom:5px;">绑定收货人
            </Button>
          </div>
          <div style="position:relative;">
            <Table :columns="receiverColumn" :data="receiver_list" ref="table"></Table>
            <div style="position:absolute;top:0px;width:100%;height:100%;display: flex;
                                          align-items: center;
                                          justify-content: center;background: rgba(210, 216, 222, 0.5);"
                 v-if="list_loadding">
              <Spin size="large"></Spin>
              <h6 style="color:#2d8cf0;margin-top:10px;">正在获取数据...</h6>
            </div>
          </div>
        </div>
      </i-col>
      <i-col :md="12">
      </i-col>
    </Row>
    <Modal v-model="bindReceiverModal" title="绑定收货人" @on-ok="submitBind">
      <Form :model="formItem" :label-width="80">
        <FormItem prop="receiver" label="收货人">
          <Input type="text" v-model="formItem.receiver" placeholder="收货人姓名"></Input>
        </FormItem>
        <FormItem prop="receiver" label="联系方式">
          <Input type="text" v-model="formItem.mobile" placeholder="联系方式"></Input>
        </FormItem>
        <FormItem prop="receiver" label="收货地址">
          <Input type="text" v-model="formItem.address" placeholder="收货地址"></Input>
        </FormItem>
        <FormItem prop="receiver_fleets" label="车队">
          <CheckboxGroup v-model="formItem.receiver_fleets">
            <Checkbox v-for="item in owned_fleets" :label="item.id" :key="item.id">{{item.login_name}}</Checkbox>
          </CheckboxGroup>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="bindReceiverModal1" title="绑定车队" @on-ok="submitBindFleet">
      <Form :model="formItem" :label-width="80">
        <FormItem prop="receiver" label="收货人">
          <Input type="text" v-model="formItem.receiver" placeholder="收货人姓名"></Input>
        </FormItem>
        <FormItem prop="receiver" label="联系方式">
          <Input type="text" v-model="formItem.mobile" placeholder="联系方式"></Input>
        </FormItem>
        <FormItem prop="receiver" label="收货地址">
          <Input type="text" v-model="formItem.address" placeholder="收货地址"></Input>
        </FormItem>
        <FormItem prop="receiver_fleets" label="绑定车队">
          <CheckboxGroup v-model="formItem.receiver_fleets">
            <Checkbox v-for="item in owned_fleets" :label="item.id" :key="item.id">{{item.login_name}}</Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem prop="id" style="display: none;">
          <Input v-model="formItem.id"/>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
  import { getOwnFleet, bindReceiverFleet, deleteReceiver, getReceiverList } from '@api/backEnd/station'

  export default {
    name: 'fleetList',
    data () {
      return {
        bindReceiverModal: false,
        bindReceiverModal1: false,
        pageindex: 1,
        receiver_list: [],
        owned_fleets: [],
        list_loadding: false,
        formItem: {
          receiver: '',
          mobile: '',
          address: '',
          receiver_fleets: [],
          id: 0
        },
        receiverColumn: [
          {
            title: '收货人',
            key: 'name'
          },
          {
            title: '联系方式',
            key: 'mobile'
          },
          {
            title: '收货地址',
            key: 'address'
          },
          {
            title: '车队',
            key: 'relate_ids',
            render: (h, param) => {
              let ids = []
              ids = param.row.relate_ids.split(',')
              let nameList = []
              for (let i in ids) {
                for (let j in this.owned_fleets) {
                  if (ids[i] === this.owned_fleets[j].id) {
                    nameList.push(this.owned_fleets[j].login_name)
                    break
                  }
                }
              }
              let list = nameList.join('、')
              return h('div',
                {},
                list
              )
            }
          },
          {
            title: '操作',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: (value, row) => {
                      let ids = []
                      if (params.row.relate_ids !== '') {
                        ids = params.row.relate_ids.split(',')
                      }
                      this.formItem.receiver_fleets = ids
                      this.formItem.id = params.row.id
                      this.formItem.receiver = params.row.name
                      this.formItem.mobile = params.row.mobile
                      this.formItem.address = params.row.address
                      this.bindReceiverModal1 = true
                    }
                  }
                }, '管理车队'),
                h('Button', {
                  props: {
                    size: 'small'
                  },
                  style: {
                    'margin-left': '20px'
                  },
                  on: {
                    click: (value, row) => {
                      deleteReceiver(params.row.id).then(res => {
                        if (res.data.isSuccess === 1) {
                          this.$Message.info('删除成功')
                          this.setInitPage(1)
                        } else {
                          this.$Message.error('删除失败')
                        }
                      })
                    }
                  }
                }, '删除收货人')
              ])
            }
          }
        ]
      }
    },
    computed: {},
    methods: {
      bindReceiver () {
        this.bindReceiverModal = true
        this.formItem = {
          receiver: '',
          mobile: '',
          address: '',
          receiver_fleets: [],
          id: 0
        }
        getOwnFleet().then(res => {
          if (res.data.isSuccess === 1) {
            console.log(res.data.data)
            this.owned_fleets = res.data.data
          }
        })
      },
      submitBind () {
        let param = {
          receiver: this.formItem.receiver,
          mobile: this.formItem.mobile,
          address: this.formItem.address,
          receiver_fleets: this.formItem.receiver_fleets.join(','),
          id: this.formItem.id
        }
        bindReceiverFleet(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.$Message.info(res.data.res)
            this.setInitPage(1)
          } else {
            this.$Message.error(res.data.res)
          }
        })
      },
      submitBindFleet () {
        let param = {
          receiver: this.formItem.receiver,
          mobile: this.formItem.mobile,
          address: this.formItem.address,
          receiver_fleets: this.formItem.receiver_fleets.join(','),
          id: this.formItem.id
        }
        bindReceiverFleet(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.$Message.info(res.data.res)
            this.setInitPage(this.pageindex)
          } else {
            this.$Message.error(res.data.res)
          }
        })
      },
      setInitPage (page) {
        getReceiverList().then(res => {
          if (res.data.isSuccess === 1) {
            this.receiver_list = res.data.data
          }
        })
        this.pageindex = page
      }
    },
    mounted () {
      getOwnFleet().then(res => {
        if (res.data.isSuccess === 1) {
          this.owned_fleets = res.data.data
        }
      })
      this.setInitPage(1)
    },
    components: {}
  }
</script>
<style scoped>

</style>
